import {
  addStyles
} from '../_utils';

export default function initBanner() {
  const { browser: b } = window.$;
  const useOldSwiper = b.msie && b.version < 10;
  
  let swiperJsLib = 'lib/swiper/swiper-4.5.0.min';
  let swiperCssLib = 'text!lib/swiper/swiper-4.5.0.min.css';
  
  if (useOldSwiper) {
    // swiperJsLib = 'lib/swiper/swiper.jquery.umd';
    swiperJsLib = 'lib/swiper/idangerous.swiper.min';
    // swiperCssLib = 'text!lib/swiper/swiper.min.css';
    swiperCssLib = 'text!lib/swiper/idangerous.swiper.css';
  }
  
  requirejs([swiperJsLib, swiperCssLib], (Swiper, swiperCSS) => {
    // add swiper styles
    addStyles('__swiper-css', swiperCSS);
    
    const config = useOldSwiper
      ? { // swiper-2.7.6
        pagination: '.swiper-pagination',
        paginationClickable: true,
        grabCursor: true,
        autoplay: 5000,
      }
      : { // swiper-4.5.0
        loop: true,
        autoplay: {
          delay: 5000,
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          dynamicBullets: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      };
    
    const mySwiper = new Swiper('.mh-banner .swiper-container', config);
  });
}